<!--
 * @Author: mia.chen mia.chen@webpowerchina.com
 * @Date: 2024-01-18 11:00:01
 * @LastEditors: mia.chen mia.chen@webpowerchina.com
 * @LastEditTime: 2024-01-18 16:00:19
 * @FilePath: \learn-project\src\views\waterfallFlow\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="waterfall">
      <el-form class="queryRef" :inline="true">
          <el-form-item label="设备id" prop="dictLabel">
              <el-input
                      placeholder="请输入设备id"
                      clearable
                      style="width: 200px"
              />
          </el-form-item>
          <el-form-item label="设备名称" style="width: 308px;">
              <el-input
                      placeholder="请输入设备名称"
                      clearable
                      style="width: 200px"
              />
          </el-form-item>
          <el-form-item label="设备状态" style="width: 308px;">
              <el-input
                      placeholder="请输入设备状态"
                      clearable
                      style="width: 200px"
              />
          </el-form-item>
          <el-form-item>
              <el-button type="primary">搜索</el-button>
              <el-button >重置</el-button>
          </el-form-item>
      </el-form>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="设备id" width="200"/>
    <el-table-column prop="name" label="设备名称" width="180" />
    <el-table-column prop="channal" label="通道号" />
        <el-table-column prop="status" label="设备状态" />
        <el-table-column prop="online" label="设备在线率"/>
        <el-table-column prop="videoStatus" label="录像状态" />
        <el-table-column prop="quantity" label="视频质量" />
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button link type="primary" @click="showVideo()">点播</el-button>
                
            </template>
        </el-table-column>
  </el-table>
      <el-pagination
              :page-size="20"
              :pager-count="10"
              layout="prev, pager, next"
              :total="100"
      />
      <el-dialog
                        v-model="dialogVisible"
                        width="680"
                >
                    <div style="display: flex; ">
                        <video width="640" height="360" controls  autoplay>
                            <source src="D:\Soft\123.mp4" type="video/mp4">
                        </video>
                    </div>
                    
                </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// import  { getEnvListApi } from './interface'
const tableData = [
  {
      id: '679s87467f98762df7488',
    name: '南门设备01',
      channal: '336592',
      status: '在线',
      online: '21%',
      videoStatus: '已录',
      quantity: '正常',

  },
  {
      id: '6us772946d51hi273944',
    name: '机房设备01',
      channal: '569356',
      status: '离线',
      online: '32%',
      videoStatus: '已录',
      quantity: '正常',
  },
    {
        id: '6us772946d51hi273924',
        name: '南门设备02',
        channal: '456952',
        status: '离线',
        online: '16%',
        videoStatus: '已录',
        quantity: '正常',
    },
    {
        id: '6us772946d51hi273144',
        name: '机房设备02',
        channal: '正常',
        status: '离线',
        online: '25%',
        videoStatus: '已录',
        quantity: '正常',
    },
    {
        id: '6us772946d51hi273444',
        name: '东北角设备01',
        channal: '125996',
        status: '在线',
        online: '22%',
        videoStatus: '已录',
        quantity: '正常',
    },
    {
        id: '6us772946d51hi211424',
        name: '东门设备01',
        channal: '636596',
        status: '在线',
        online: '44%',
        videoStatus: '已录',
        quantity: '正常',
    },
    {
        id: '6us772946d51hi567944',
        name: '西南门设备01',
        channal: '789556',
        status: '在线',
        online: '25%',
        videoStatus: '已录',
        quantity: '正常',
    },
    {
        id: '6us772946d51hi287916',
        name: '西南门设备02',
        channal: '236995',
        status: '离线',
        online: '25%',
        videoStatus: '已录',
        quantity: '正常',
    },
    {
        id: '6us772946d51hi273944',
        name: '北门设备01',
        channal: '268965',
        status: '离线',
        online: '25%',
        videoStatus: '已录',
        quantity: '正常',
    },
    {
        id: '6us772946d51hi273944',
        name: '机房设备03',
        channal: '145923',
        status: '离线',
        online: '15%',
        videoStatus: '已录',
        quantity: '正常',
    },
]

const dialogVisible = ref(false)
const showVideo = () => {
    dialogVisible.value = true;
   
}
</script>

<style scoped>

</style>
